<template>
  <view>
    <view class="padding">
      <view class="padding-sm bg-white radius-xl form">
        <view class="item padding-sm crow">
          <view class="name">头像</view>
          <image style="width: 120rpx;height: 120rpx" :src="form.avatar" v-if="form.audit_status  === 1 || form.audit_status  === 2"></image>
          <view class="upload" v-else>
            <u-upload :disabled="form.audit_status  === 1 || form.audit_status  === 2" :action="action" max-count="1" :file-list="fileList" @on-success="successFile" @on-remove="removeFile"></u-upload>
          </view>
        </view>
        <view class="item padding-sm crow">
          <view class="name">姓名</view>
          <input :disabled="form.audit_status  === 1 || form.audit_status  === 2" type="text" placeholder="请输入姓名" class="text-right" v-model="form.nickname">
        </view>
        <view class="item padding-sm crow">
          <view class="name">年龄</view>
          <input :disabled="form.audit_status  === 1 || form.audit_status  === 2" type="number" placeholder="请输入年龄" class="text-right" v-model="form.age">
        </view>
        <view class="item padding-sm crow">
          <view class="name">手机号码</view>
          <input @blur="phoneBlur" :disabled="form.audit_status  === 1 || form.audit_status  === 2" type="number" placeholder="请输入手机号码" class="text-right" v-model="form.phone">
        </view>
        <view class="item padding-sm crow">
          <view class="name">意向城市</view>
          <view @click="form.audit_status === 0 && (regionShow = true)">
            <template v-if="form.city">{{ form.city}}</template>
            <template v-else>
              <text class="text-gray">请选择城市</text>
            </template>
            <text class="cuIcon-right" v-if="form.audit_status === 0"></text>
          </view>
        </view>
        <view class="item padding-sm crow">
          <view class="name">性别</view>
          <view @click="form.audit_status === 0 && (genderShow = true)">
            <template v-if="form.gender">
              {{form.gender}}
            </template>
            <template v-else>
              <text class="text-gray">请选择性别</text>
            </template>
            <text class="cuIcon-right" v-if="form.audit_status === 0"></text>
          </view>
        </view>
        <view class="item padding-sm crow">
          <view class="name">服务类型</view>
          <view @click="form.audit_status === 0 && (serviceTypeShow = true)">
            <template v-if="form.service_type">
              {{form.service_type}}
            </template>
            <template v-else>
              <text class="text-gray">请选择服务类型</text>
            </template>
            <text class="cuIcon-right" v-if="form.audit_status === 0"></text>
          </view>
        </view>
        <view class="item padding-sm crow">
          <view class="name">照片</view>
          <div style="display: flex;flex-wrap: wrap" v-if="form.audit_status  === 1 || form.audit_status  === 2">
            <image v-for="item in form.photos" style="width: 120rpx;height: 120rpx;margin-right: 10rpx;margin-bottom: 10rpx;" :src="item" ></image>
          </div>
          <view class="upload" v-else>
            <u-upload :disabled="form.audit_status  === 1 || form.audit_status  === 2" :action="action" max-count="1" :file-list="fileList2" @on-success="successFile2" @on-remove="removeFile2"></u-upload>
          </view>
        </view>
        <view class="item padding-sm crow">
          <view class="name">个人简介</view>
          <input type="textarea" :disabled="form.audit_status  === 1 || form.audit_status  === 2" placeholder="请输入个人简介" class="text-right" v-model="form.description
">
        </view>
        <view class="item padding-sm crow">
          <view class="name">身份证号码</view>
          <input @blur="cardNoBlur" :disabled="form.audit_status  === 1 || form.audit_status  === 2" type="text" placeholder="请输入身份证号码" class="text-right" v-model="form.card_no">
        </view>
        <view class="item padding-sm crow">
          <view class="name">身份证照片（正面）</view>
          <image style="width: 120rpx;height: 120rpx" :src="form.card_front" v-if="form.audit_status  === 1 || form.audit_status  === 2"></image>

          <u-upload :disabled="form.audit_status  === 1 || form.audit_status  === 2" :action="action" max-count="1" :file-list="fileList3" @on-success="successFile3" @on-remove="removeFile3"></u-upload>
        </view>
        <view class="item padding-sm crow">
          <view class="name">身份证照片（反面）</view>
          <image style="width: 120rpx;height: 120rpx" :src="form.card_back" v-if="form.audit_status  === 1 || form.audit_status  === 2"></image>

          <u-upload :disabled="form.audit_status  === 1 || form.audit_status  === 2" :action="action" max-count="1" :file-list="fileList4" @on-success="successFile4" @on-remove="removeFile4"></u-upload>
        </view>
      </view>

      <view class="padding margin-top-lg">
        <view class="flex flex-direction">
          <template v-if="form.audit_status === 1">
            <button class="cu-btn china-btn-bg lg round" disabled>审核中</button>
          </template>
          <template v-if="form.audit_status === 0">
            <button class="cu-btn china-btn-bg lg round" @click="submit()">提交审核</button>
          </template>
          <template v-if="form.audit_status === 2">
            <text class="text-center">审核成功！</text>
          </template>
          <template v-if="form.audit_status === 3">
            <button class="cu-btn china-btn-bg lg round" @click="submit()">重新提交</button>
          </template>
        </view>
      </view>
    </view>

    <!-- 选择意向城市 -->
    <u-select
        cancel-color="#0ab27d"
        confirm-color="#0ab27d"
        mode="single-column"
        v-model="regionShow" :list="columns"  @confirm="confirm" @cancel="regionClose"></u-select>
    <u-select
        cancel-color="#0ab27d"
        confirm-color="#0ab27d"
        mode="single-column"
        v-model="genderShow" :list="[{label:'男',value:'男'},{label:'女',value:'女'}]"  @confirm="genderConfirm" @cancel="genderClose"></u-select>
    <u-select
        cancel-color="#0ab27d"
        confirm-color="#0ab27d"
        mode="single-column"
        v-model="serviceTypeShow" :list="[{label:'月嫂',value:'月嫂'},{label:'养老护工',value:'养老护工'}]"  @confirm="serviceTypeConfirm" @cancel="serviceTypeClose"></u-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      regionShow:false,
      genderShow:false,
      serviceTypeShow:false,
      columns: [],
      form: {
        photos: [],
        card_front: '',
        card_back: '',
        audit_status: 0,
        service_type: ''
      },
      Info:[],
      action:  this.$baseUrl + '/api/upload/file',
      fileList: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      userInfo: {}
    };
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo') || {}
    if (!this.userInfo.id) {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
    this.$http.getCityList().then(res => {
      this.columns = res.map(item => {
        return {
          value: item.id,
          label: item.name,
          ...item
        }
      });
    });
    this.getList()
  },
  methods:{
    validatePhone(phone) {
      // 中国大陆手机号正则表达式
      const phoneRegex = /^1[3-9]\d{9}$/;
      return phoneRegex.test(phone);
    },
    validateIdCard(idCard) {
      // 身份证正则表达式
      const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      return idCardRegex.test(idCard);
    },
    cardNoBlur() {
      if (!this.validateIdCard(this.form.card_no)) {
        uni.showToast({
          title: '请输入正确的身份证号',
          icon: 'none',
          duration: 2000
        });
      }
    },
    phoneBlur() {
      if (!this.validatePhone(this.form.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none',
          duration: 2000
        });
      }
    },
    getList() {
      this.$http.getStaffApplyList({
        member_id: this.userInfo.id,
      }).then(res => {
        if (res.length) {
          let avatar = res[0].avatar && res[0].avatar.includes('http') ? res[0].avatar : this.$baseUrl + res[0].avatar
          let photos = res[0].photos ? [res[0].photos]: []
          this.form = {
            ...res[0],
            avatar,
            photos,
            city: res[0].city.name
          }
          this.fileList = [{
            url: avatar
          }]
          this.fileList2 = photos.map(item => {
            return {
              url: item
            }
          })
          this.fileList3 = [{
            url: res[0].card_front
          }]
          this.fileList4 = [{
            url: res[0].card_back
          }]
          console.log('this.fileList3',this.fileList3)
        }
      })
    },
    successFile(e) {
      this.form.avatar = e.data.url && e.data.url.includes('http') ? e.data.url : this.$baseUrl + e.data.url
    },
    removeFile(e) {
      this.form.avatar = ''
    },
    successFile2(e) {
      this.form.photos.push(e.data.url)
    },
    removeFile2(e) {
      this.form.photos.splice(e,1)
    },
    successFile3(e) {
      this.form.card_front = e.data.url && e.data.url.includes('http') ? e.data.url : this.$baseUrl + e.data.url
    },
    removeFile3(e) {
      this.form.card_front = ''
    },
    successFile4(e) {
      this.form.card_back = e.data.url && e.data.url.includes('http') ? e.data.url : this.$baseUrl + e.data.url
    },
    removeFile4(e) {
      this.form.card_back = ''
    },
    submit(){
      if (!this.form.phone) {
        uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        })
        return
      }
      // 检验手机号格式
      if (!this.validatePhone(this.form.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        })
        return
      }
      if (!this.form.card_no) {
        uni.showToast({
          title: '请输入身份证号码',
          icon: 'none'
        })
        return
      }
      // 身份证号码校验
      if (!this.validateIdCard(this.form.card_no)) {
        uni.showToast({
          title: '身份证号码格式不正确',
          icon: 'none'
        })
        return
      }
      if (!this.form.avatar) {
        uni.showToast({
          title: '请上传头像',
          icon: 'none'
        })
        return
      }
      if (!this.form.nickname) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      if (!this.form.age) {
        uni.showToast({
          title: '请输入年龄',
          icon: 'none'
        })
        return
      }
      if (!this.form.city) {
        uni.showToast({
          title: '请选择城市',
          icon: 'none'
        })
        return
      }
      if (!this.form.gender) {
        uni.showToast({
          title: '请选择性别',
          icon: 'none'
        })
        return
      }
      if (!this.form.service_type) {
        uni.showToast({
          title: '请选择服务类型',
          icon: 'none'
        })
        return
      }
      if (!this.form.photos.length) {
        uni.showToast({
          title: '请上传照片墙纸',
          icon: 'none'
        })
        return
      }
      if (!this.form.description) {
        uni.showToast({
          title: '请输入个人简介',
          icon: 'none'
        })
        return
      }
      if (!this.form.card_front) {
        uni.showToast({
          title: '请上传身份证照片（正面）',
          icon: 'none'
        })
        return
      }
      if (!this.form.card_back) {
        uni.showToast({
          title: '请上传身份证照片（反面）',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '提交中'
      })
      this.$http.createStaffApply({
        ...this.form,
        photos: this.form.photos[0],
        audit_status: 1,
        member_id: this.userInfo.id
      }).then(res => {
        uni.showToast({
          title: '提交成功',
          icon: 'none'
        })
        this.form.audit_status = 1
      })
    },
    confirm(value){
      console.log(value)
      this.form.city = value[0].label;
      this.form.city_id = value[0].value;
      this.regionClose();
    },
    regionClose(){
      this.regionShow = false;
    },
    genderConfirm(value){
      this.form.gender = value[0].label;
      this.genderClose();
    },
    genderClose(e){
      this.genderShow = false;
    },
    serviceTypeConfirm(value){
      this.form.service_type = value[0].label;
      this.serviceTypeClose();
    },
    serviceTypeClose(e){
      this.serviceTypeShow = false;
    },
  }
}
</script>

<style lang="less" scoped>
.form{
  .item{
    justify-content: space-between;
    margin-bottom: 30upx;
  }
}
</style>
